<template>
  <div class="login-register-box">
    <div class="login-register-main">
      <div class="login-main">
        <van-form @submit="handleSubmit" label-width="48">
          <van-cell-group inset>
            <van-field
              v-model="formData.userName"
              name="用户名"
              label="用户名"
              autocomplete=""
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="formData.pwd"
              type="password"
              name="密码"
              label="密码"
              autocomplete=""
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-if="!isLogin"
              v-model="formData.alignPwd"
              type="password"
              name="密码"
              label="密码"
              autocomplete=""
              placeholder="请再次输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button
              round
              block
              type="primary"
              :loading="subLoading"
              native-type="submit"
            >
              {{ titleName }}
            </van-button>
          </div>
          <div style="margin: 16px; text-align: center" v-if="!isLogin">
            <span @click="loginFn()">已有账号，直接登录</span>
          </div>
          <div style="margin: 16px; text-align: center" v-if="!isLogin">
            支付成功，注册成为VIP
          </div>
        </van-form>
      </div>
    </div>
  </div>
  <div class="login-register-loading" v-if="pageLoading">
    <van-loading type="spinner" color="#1989fa" vertical>加载中...</van-loading>
  </div>
  <div class="img-body-box" v-if="isBrowser">
    <img :src="img07" alt="" />
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";

import {
  UserRegister, //用户注册
  UserLogin, // 用户登录
  BindMemberCode,
} from "@/api/mine/index.js";

import { GetMemberCodeInfo } from "@/api/common";

import img07 from "@/assets/image/img07.jpg";

const route = useRoute();
const router = useRouter();

const state = reactive({
  formData: {
    userName: "",
    pwd: "",
    alignPwd: "",
  },
  titleName: "",
});

let isBrowser = ref(false);

const { formData, titleName } = toRefs(state);

let isLogin = ref(true);

// 已有账号直接登录
const loginFn = () => {
  isLogin.value = true;
  titleNameFn();
};

let subLoading = ref(false);
const handleSubmit = async () => {
  let { userName, pwd, alignPwd } = state.formData;
  let params = {
    userName,
    pwd,
  };
  if (!isLogin.value) {
    if (alignPwd != pwd) {
      showToast("两次密码不一致，请重新输入");
      return;
    }
  }
  subLoading.value = true;
  try {
    let data = isLogin.value
      ? await UserLogin(params)
      : await UserRegister(params);
    console.log(data, "qqqq");
    if (!isLogin.value) {
      if (data.code == 200) {
        isLogin.value = true;
        showToast("注册成功，请登录");
        titleNameFn();
      }
    } else {
      localStorage.setItem("token", data.data.token);
      localStorage.setItem("userId", data.data.userId);
      if (route.query.id) {
        await BindMemberCode({
          clientId: data.data.userId,
          token: route.query.id,
        });
      }
      router.push({
        path: "/mine",
      });
    }
    subLoading.value = false;
  } catch (error) {
    localStorage.clear();
    subLoading.value = false;
  }
};

let pageLoading = ref(true);

const getMemberCodeInfoFn = async (token) => {
  let params = {
    token,
  };
  let { data } = await GetMemberCodeInfo(params);
  if (data.status != 0) {
    isLogin.value = true;
    titleNameFn();
  }
  console.log(data.status, "data123");
};

const isAlipayBrowser = () => {
  return /AlipayClient/.test(navigator.userAgent);
};

onMounted(async () => {
  if (route.query.id) {
    localStorage.clear();
    isLogin.value = false;
    getMemberCodeInfoFn(route.query.id);
  }
  pageLoading.value = false;
  titleNameFn();
  // 使用示例
  if (isAlipayBrowser()) {
    isBrowser.value = true;
    return;
  }
});

const titleNameFn = () => {
  state.titleName = isLogin.value ? "登录" : "注册";
};
</script>



<style lang="scss" scoped>
.login-register-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}

.login-register-box {
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  background: url(../../assets/image/img005.png) no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
}

.login-register-main {
  width: 90vw;
  margin-top: -20vh;
}

.login-register-loading {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-body-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(102, 102, 102);

  img {
    width: 100%;
  }
}
</style>
